<template>
  <transition name="down">
    <div class="message" v-if="isShow">
      <div class="msg-li">
        <svg-icon :class="type" :icon="type"></svg-icon>
        <span class="text">{{ message }}</span>
      </div>
    </div>
  </transition>
</template>

<script setup>
import { ref, onMounted } from "vue";
const props = defineProps({
  message: {
    type: String,
    default: "",
  },
  type: {
    type: String,
    // warn警告 error错误 success成功
    default: "warning",
  },
});

// 定义一个对象，包含三种情况的样式，对象key就是类型字符串
// const style = reactive({
//     warning: {
//         icon: 'warning'
//     },
//     error: {
//         icon: 'error'
//     },
//     success: {
//         icon: 'success'
//     }
// })

// 定义一个数据控制显示隐藏，默认是隐藏，组件挂载完毕显示
const isShow = ref(false);

onMounted(() => {
  // 调用钩子函数，等dom渲染完成后，再进行赋值，如果直接赋值，则会直接被渲染
  isShow.value = true;
  // console.log(props.type)
  // console.log(style[props.type].icon)
  setTimeout(() => {
    isShow.value = false;
  }, 3000);
});
</script>

<style lang="less" scoped>
// 动画效果
.down {
  &-enter {
    &-from {
      transform: translateY(-30px);
      opacity: 0;
    }

    &-active {
      transition: @tr;
    }

    &-to {
      transform: translateY(0px);
      opacity: 1;
    }
  }

  &-leave {
    &-from {
      transform: translateY(0);
      opacity: 1;
    }

    &-active {
      transition: @tr;
    }

    &-to {
      transform: translateY(-30px);
      opacity: 0;
    }
  }
}

.message {
  width: 100%;
  height: 40px;
  position: fixed;
  z-index: 9999;
  top: 20px;
  line-height: 40px;
  display: flex;
  justify-content: center;

  .msg-li {
    padding: 0 20px;
    border-radius: 4px;
    color: @gray-0;
    background: @gray-10;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }

  .svg-icon {
    height: 24px;
    width: 24px;
    margin-right: 6px;
    vertical-align: middle;
  }

  .text {
    vertical-align: middle;
  }

  // icon颜色
  .warning {
    color: @warning-color;
  }

  .success {
    color: @primary-color;
  }

  .error {
    color: @error-color;
  }
}
</style>
